<template>
	<div class="mb-4 p-4 bg-bg-1 text-t-3 rounded-lg">
		<div class="flex flex-wrap gap-4 text-base">
			<div class="w-[320px]">
				<div class="mb-[6px] text-t-1">这里可以修改颜色</div>
				<n-color-picker
					v-model:value="color"
					size="large"
					class="h-12"
					style="--n-border-radius: 8px"
					:swatches="['#000', '#fff', '#7864FF', '#00be7a', '#febc04', '#f80563', '#0688f9']" />
			</div>
			<div class="w-[320px]">
				<base-input v-model="filter" label="过滤" placeholder="请输入图标名称" />
			</div>
			<div>
				<div class="mb-[6px] text-t-1">复制的内容</div>
				<n-switch v-model:value="copyName" size="large">
					<template #checked>名称</template>
					<template #unchecked>标签</template>
				</n-switch>
			</div>
		</div>
		<div>{{ filter ? '找到' : '共计' }} {{ iconList.length }} 个图标</div>
	</div>
	<div class="text-[40px] text-t-3 rounded-lg">
		<div class="flex flex-wrap gap-4" :style="{ color: color }">
			<div v-for="item in iconList" :key="item">
				<base-copy :value="copyName ? item : `<base-icon name=&quot;${item}&quot; />`" show-content>
					<div
						class="flex flex-col items-center gap-2 w-25 h-25 pt-3 py-1 rounded-lg bg-bg-1 overflow-hidden app-bg-react">
						<base-icon :name="item" />
						<span class="text-base text-center line-clamp-2">{{ item }}</span>
					</div>
				</base-copy>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { BaseCopy, BaseIcon, BaseInput } from '@/components/base'
import { NColorPicker, NSwitch } from 'naive-ui'

const color = ref('#0d5953')
const filter = ref('')
const copyName = ref(false)
const list = import.meta.glob('/src/assets/icon/*.svg')
const iconList = computed(() => {
	return Object.keys(list)
		.map((i) => i.replace('/src/assets/icon/2up-', '').replace('.svg', ''))
		.filter((i) => i.toLowerCase().includes(filter.value.toLowerCase()))
})
</script>

<style scoped></style>
